<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!-- IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 设置 viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 兼容国产浏览器的高速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!--[if lt IE 9]>
	      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
		<link rel="stylesheet" type="text/css" href="../../../bootstrap-3.3.7-dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap-table.css" />
	</head>

	<body>
		<div class="container-fluid">
			

			<h1>js写法，url请求</h1>
			<div id="toolbar" class="btn-group">
				<button id="btn_add" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	            </button>
					<button id="btn_edit" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	            </button>
					<button id="btn_delete" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	            </button>
			</div>
			<table id="table2"></table>
		</div>
		<script src="../../../bootstrap-3.3.7-dist/lib/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
		<script src="locale/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			

			$('#table2').bootstrapTable({

				//ajax请求的配置
//				url: '../docs/data/data2/demo.response.json',
				url: 'data/data2/demo.response.json',
				method: 'get', //服务器数据的请求方式 'get' 或 'post'。
				dataType: 'json', //服务器返回的数据类型。
				queryParams: queryParams, //自定义设置请求参数
				queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求 
				responseHandler: function(res) { //加载服务器数据之前的处理程序，可以用来格式化数据。参数：res为从服务器请求到的数据。 
					alert(res);
					return res;
				},

				toolbar: '#toolbar', //工具按钮用哪个容器
				striped: true, //使表格带有条纹
				uniqueId: "id", //每一行的唯一标识，一般为主键列
				detailView: false, //是否显示父子表
				
				showToggle: true, //名片格式 
				cardView: false, //设置为True时显示名片（card）布局,针对移动端 

				showColumns: true, //显示隐藏列 
				showRefresh: true, //显示刷新按钮 	
				search: true, //是否显示右上角的搜索框 
				clickToSelect: true, //点击行即可选中单选/复选框 

				//控制行的背景颜色
				rowStyle: function(row, index) {
					//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
					if(row.id % 2 == 0) {
						return {
							classes: 'success'
						};
					} else {
						return {
							classes: 'danger'
						};
					}

				},

				//自定义行属性 
				rowAttributes: function(row, index) {
					return {
						data: '000'
					};
				},

				columns: [{
						title: "全选", //标题
						checkbox: true
					},
					{
						field: 'id',
						title: 'Item ID',
						sortable: true,
					}, {
						field: 'name',
						title: 'Item Name',
						sortable: true,
						sorter: function(a, b) { //自定义排序
							var a = a.substring(5);
							var b = b.substring(5);
							return a - b;
						}
					}, {
						field: 'price',
						title: 'Item Price',
						sortable: true,
						sorter: function(a, b) { //自定义排序
							var a = a.substring(1);
							var b = b.substring(1);
							return a - b;
						}
					}
				],

				//分页参数区域
				pagination: true, //设置为 true 会在表格底部显示分页条。
				paginationLoop: true, //设置为 true 启用分页条无限循环的功能。
				sidePagination: 'client', //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
				pageNumber: 1, //如果设置了分页，首页页码。
				pageSize: 10, //如果设置了分页，页面数据条数。
				pageList: [10, 25, 50, 100], //如果设置了分页，设置可供选择的页面数据条数。设置为 All 或者 Unlimited，则显示所有记录。

				//事件监听
				onClickRow: function(row, tr, flied) { //监听点击表格行
					console.log(row);
					console.log(tr);
					console.log(flied);
				},
				onCheckAll: function(row, tr, flied) { //监听全选
					console.log(row);
					console.log(tr);
					console.log(flied);
				},
			});

			//自定义请求参数
			function queryParams(params) { //配置参数 
				var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 
					pageSize: params.limit, //页面大小 
					pageNumber: params.pageNumber, //页码 
					minSize: 1,
					maxSize: 10,
					minPrice: "$1",
					maxPrice: "$10",
					Cut: "Cut",
					Color: "Color",
					mmp: "Clarity",
					sort: params.sort, //排序列名 
					sortOrder: params.order //排位命令（desc，asc） 
				};
				return temp;
			}
		</script>
	</body>

</html>